import React from 'react'
import { connect } from 'react-redux'
import classnames from 'classnames'
import './watchStyle.less'

const mapStateToProps = (state) => {
  return {
    // modalContent: state.dynamics.modalContent,
    // showModal: state.dynamics.showModal
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    // openModal: () => dispatch(global.allActions.appActions.openModal('hihi')),
    // closeModal: () => dispatch(global.allActions.appActions.closeModal())
  }
}

class WatchCode extends React.Component<any, any> {
  public constructor(props) {
    super(props)
    this.state = {
      inviteId: '',
      tip: '',
    }
  }
  
  public componentDidMount() {

  }

  inviteIdChange(e) {
    // const parsed = e.target.value.match(/[0-9]?/g)
    // if (parsed.length <= 7) {
    //   this.setState({inviteId: parsed.join('')})
    // }
    this.setState({inviteId: _.trim(e.target.value)})
  }

  query() {
    console.log(this.state.inviteId);
    const url = `${config.pre}/recordCenter/roomNo/${this.state.inviteId}`
    const opt = { method: 'GET' }
    fetchJson(url, opt).then(data => {
      console.log(data);
      if (data.result) {
        this.setState({tip: data.message})
      } else {
        this.setState({tip: ''})
        window.location.hash = 'WatchCodeShow/' + this.state.inviteId
      }
    })
  }

  public render() {
    const {close} = this.props
    const {inviteId, tip} = this.state
    return <div className="dialog-block has-mask full" >
      <div className="mall-content content">
        <div className="full-width title-wrapper">
          <img className="title" src="img/battle/look-text.png" alt=""/>
          <img onClick={close} className="close" src="img/mall/dialog/close.png" alt=""/>
        </div>
        <div className="modal-wrapper">
          <div className="buy-row first">
            请输入他人分享的房间号
          </div>
          <div className="buy-row clearfix flex-center">
            <input type="text" className="invite-id larger" value={inviteId} onChange={this.inviteIdChange.bind(this)} id="invite-ipt" placeholder=""></input>
          </div>
          <div className="buy-row">
            <span>{tip}</span>
          </div>
          <div className="bottom-btn">
            <img className="confirm" onClick={close} src="img/mall/dialog/cancel.png" alt=""></img>
            <img className="confirm" onClick={this.query.bind(this)} src="img/mall/dialog/confirm.png" alt=""></img>
            {/* <img className="full-width" src="img/mall/dialog/confirm.png" alt=""></img> */}
          </div>
        </div>
      </div>
    </div>
  }

}
export default connect(mapStateToProps, mapDispatchToProps)(WatchCode)